<!--
 * @Author: wangshuguang
 * @Date: 2022-03-13 20:11:33
 * @LastEditTime: 2022-04-27 18:14:50
 * @LastEditors: wangshuguang
 * @Description: 插件配置
-->
<template>
  <el-card class="common-container">
    <el-tabs v-model="listQuery.openFlag" @tab-click="handleClick">
      <el-tab-pane label="已开通" name="1" />
      <el-tab-pane label="未开通" name="0" />
    </el-tabs>
    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
      <el-form-item label="机构/业务编号">
        <el-input v-model="listQuery.qryInfo" placeholder="机构/业务编号" size="small" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round size="small" @click="fetchData">查询</el-button>
      </el-form-item>
      <el-form-item v-show="listQuery.openFlag === '0'">
        <el-button type="primary" round size="small" @click="plugMam({}, 'add')">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 已开通 -->
    <el-table v-if="listQuery.openFlag == '1'" key="openTable" size="medium" :data="list" border :span-method="objectSpanMethod">
      <el-table-column type="index" width="50" />
      <el-table-column prop="orgName" align="center" label="机构" />
      <el-table-column prop="orgId" align="center" label="业务编码" />
      <el-table-column prop="pluginName" align="center" label="已开通插件" />
      <el-table-column prop="openAmt" align="center" label="开通费用/元" />
      <el-table-column prop="minBkgeAmt" align="center" label="抽佣">
        <template slot-scope="scope">
          <div>{{ scope.row.bkgeRate }}%</div>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" align="center" label="特殊角色抽佣" width="150">
        <template slot-scope="scope">
          <div v-if="scope.row.pluginCode == 'supermember' && scope.row.specialRoleRate">
            <span>核心商户：{{ scope.row.specialRoleRate }}%</span>
          </div>
          <div v-else>无</div>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" align="center" label="直属上级抽佣占比" width="150">
        <template slot-scope="scope">
          <div>机构：{{ scope.row.orgRate }}%</div>
          <div>运营中心：{{ scope.row.operCenterRate }}%</div>
          <div>一级代理：{{ scope.row.oneAgtRate }}%</div>
          <div>二级代理：{{ scope.row.twoAgtRate }}%</div>
          <div>三级代理：{{ scope.row.threeAgtRate }}%</div>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" align="center" label="更新时间" width="200" />
      <el-table-column prop="operName" align="center" label="操作人" width="100" />
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <div style="display: flex;flex-flow: column;align-items: center;justify-content:flex-end;">
            <el-button size="mini" type="primary" @click="viewData(scope.row)">详情</el-button>
            <el-button size="mini" type="primary" style="margin: 5px 0 5px 0;" @click="editdata(scope.row)">修改配置</el-button>
            <el-button size="mini" type="primary" @click="plugMam(scope.row,'edit')">启用/关闭插件</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 未开通 -->
    <el-table v-else key="unOpenTable" size="medium" :data="list" border>
      <el-table-column type="index" width="50" />
      <el-table-column prop="orgName" align="center" label="机构" />
      <el-table-column prop="orgId" align="center" label="业务编码" />
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="plugMam(scope.row,'mercAdd')">启用插件</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :total="total"
        layout="total, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 配置修改 -->
    <el-drawer
      :title="infoConfig.title"
      :visible.sync="infoVisible"
      size="70%"
      direction="rtl"
    >
      <plugConfigDialog
        v-if="infoVisible"
        :info-config="infoConfig"
        @sucClose="sucClose"
        @close="infoVisible = false"
      />
    </el-drawer>
    <!-- 机构插件配置管理 -->
    <el-dialog
      :title="infoConfig.title"
      :visible.sync="manInfoVisible"
      width="70%"
      direction="rtl"
    >
      <plugConfigMamDialog
        v-if="manInfoVisible"
        :info-config="infoConfig"
        @sucClose="sucClose"
        @next="next"
        @close="manInfoVisible = false"
      />
    </el-dialog>
  </el-card>
</template>

<script>
import { pluginConfList, pluginConfQryDetail, qryMarketPlugins } from '@/api/plugs'
import plugConfigDialog from './plugConfigDialog.vue'
import plugConfigMamDialog from './plugConfigMamDialog.vue'

export default {
  components: { plugConfigDialog, plugConfigMamDialog },
  data() {
    return {
      value: true,
      newlyAddedShow: false,
      manInfoVisible: false,
      infoVisible: false,
      infoConfig: {
        title: '',
        data: {}
      },
      listS: [],
      form: {},
      scope: 0,
      total: 0,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        qryInfo: '',
        openFlag: '1'
      },
      list: [],
      changSelectList: []
    }
  },

  mounted() {
    this.fetchData()
  },
  methods: {
    // 选择哪一列需要合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (!([3, 4, 5, 6].includes(columnIndex))) {
        return {
          rowspan: row.rowspan,
          colspan: 1
        }
      }
    },
    // 切换栏
    handleClick(tab, event) {
      if (this.listQuery.qryInfo != '') {
        this.listQuery = this.$options.data().listQuery
      }
      this.fetchData()
    },
    shdsl(data) {
      console.log(data)
    },
    sucClose() {
      this.infoVisible = false
      this.fetchData()
    },
    // 下一步
    next(formData) {
      const { orgId, list } = formData
      pluginConfQryDetail({ orgId }).then(res => {
        console.log('查询机构抽佣插件配置详情', res, formData)
        const data = res.data || { ...formData }
        const type = this.infoConfig.type
        this.infoConfig = {
          type: type == 'edit' ? 'edit' : 'add',
          title: '机构插件抽佣配置修改',
          data: {
            ...data,
            plugConfList: list
          }
        }
        this.manInfoVisible = false
        this.infoVisible = true
      })
    },
    editdata(data) {
      console.log('editdata', data)
      const { orgId } = data.parentData
      pluginConfQryDetail({ orgId }).then(res => {
        const data = res.data || { ...data.parentData }
        this.infoConfig = {
          type: 'edit',
          title: '机构插件抽佣配置修改',
          data: {
            ...data
          }
        }
        this.infoVisible = true
      })
    },
    // 打开插件管理
    plugMam(data, type) {
      if (type == 'add') {
        this.infoConfig = {
          type,
          title: '新增机构插件抽佣配置',
          data
        }
        this.manInfoVisible = true
      } else {
        const orgId = {
          orgId: data.orgId
        }
        qryMarketPlugins(orgId).then(res => {
          if (res.succeed) {
            console.log('请求每行列表数据', res)
            this.infoConfig = {
              type,
              title: '机构插件管理',
              formInfo: res.data,
              data
            }
            this.manInfoVisible = true
          }
        })
      }
    },
    viewData(data) {
      console.log('editdata', data)
      const { orgId } = data.parentData
      pluginConfQryDetail({ orgId }).then(res => {
        const data = res.data || { ...data.parentData }
        this.infoConfig = {
          type: 'detail',
          title: '机构插件抽佣配置详情',
          data: {
            ...data
          }
        }
        this.infoVisible = true
      })
    },
    // 查询列表数据
    fetchData() {
      pluginConfList(this.listQuery).then(res => {
        if (res.code === 0) {
          console.log('列表数据+++++++', res)
          const { list, total } = res.data
          const { openFlag } = this.listQuery
          if (openFlag == '1') {
            // 已开通列表 需要拼接数据
            const arr = []
            list.forEach((item, index) => {
              item.orgPluginConfs.forEach((plug, plugIdx) => {
                const obj = {
                  ...plug,
                  ...item,
                  parentData: item,
                  childData: plug,
                  rowIndex: index + 1,
                  rowspan: plugIdx ? 0 : item.orgPluginConfs.length
                }
                arr.push(obj)
              })
            })
            this.list = arr
          } else {
            this.list = list.map((item, index) => {
              return {
                ...item,
                rowIndex: index + 1
              }
            })
          }
          this.total = total
          console.log('list', this.list)
        }
      })
    },
    handleEdit(user) {
      this.$refs.userDialog.openEdit(user.id).then(() => {
        this.fetchData()
      })
    },

    handleFilter() {
      this.fetchData()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val
      this.fetchData()
    },
    handleResetPassword(user) {
      this.$refs.resetPw.open(user.id)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.search-container {
	margin-top: 20px;
	margin-bottom: 20px;
}

.search-wrap {
	width: 300px;
	margin-right: 10px;
}
.el-button--primary:hover,
.el-button--primary:focus {
	background-color: $btnBgc;
	border-color: $btnBgc;
}
.content{
.topContent{
  .topContentTitle{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .topContentTitle-line{
      width: 2px;
      height: 25px;
      background-color: #FFB72F;
    }
    .topContentTitle-txt{
      font-size: 16px;
      font-weight: 600;
      margin-left: 10px;
    }
  }
}
.bottomContent{
  .topContentTitle{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .topContentTitle-line{
      width: 2px;
      height: 25px;
      background-color: #FFB72F;
    }
    .topContentTitle-txt{
      font-size: 16px;
      font-weight: 600;
      margin-left: 10px;
    }
  }
  .smallTxt{
    font-size: 10px;
    color:#FFB72F;
    margin-bottom: 20px;
  }
}
}
</style>
